<template>
  <t-virtual-scroll
    :items="heavyList"
    virtual-scroll-horizontal
    v-slot="{ item, index }"
  >
    <div :key="index" class="row items-center">
      <t-separator v-if="index === 0" vertical spaced />

      <t-avatar v-if="item.avatar === true" class="bg-black text-white q-my-md">
        {{ (index % 10) + 1 }}
      </t-avatar>

      <t-item v-else dense clickable>
        <t-item-section>
          <t-item-label> #{{ index }} - {{ item.label }} </t-item-label>
        </t-item-section>
      </t-item>

      <t-separator vertical spaced />
    </div>
  </t-virtual-scroll>
</template>

<script>
  const maxSize = 10000;
  const heavyList = [];

  for (let i = 0; i < maxSize; i++) {
    heavyList.push({
      label: 'Option ' + (i + 1),
      avatar: i % 5 === 0,
    });
  }

  export default {
    setup() {
      return {
        heavyList,
      };
    },
  };
</script>
